<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"选择系统人员"}){} %>
</head>
<body>
<div id="app">
  <div class="mainBox ">
    <div class="main-container">
      <div class="layui-row layui-col-space10">
        <div class="layui-col-sm3">

          <div class="layui-card">
            <div class="layui-card-body">
              <t-input-adornment prepend="筛选：">
                <t-input @change="onInput" placeholder="请输入组织名称" clearable></t-input>
              </t-input-adornment>
            </div>
          </div>
          <div class="layui-card">
            <div class="layui-card-body">
              <t-tree v-loading="orgOptions.loading" :data="orgOptions.data" activable hover line :filter="filterOrg" @active="clickTree"></t-tree>
            </div>
          </div>
        </div>

        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-body">
              <t-form :data="queryForm" label-width="calc(5em + 20px)" layout="inline" colon>
                <t-form-item label="人员名称">
                  <t-input v-model="queryForm.name" placeholder="输入人员名称" clearable></t-input>
                </t-form-item>
                <t-space>
                  <t-button theme="primary" @click="queryData">
                    <template #icon><i class="layui-icon layui-icon-search text-size-14 mr-10"></i></template>
                    查询
                  </t-button>
                </t-space>
              </t-form>
            </div>
          </div>

          <div class="layui-card">
            <div class="layui-card-body">
              <t-table :columns="columns" :data="table.data" :loading="table.loading" bordered hover resizable>
                <template #loading>
                  <div class="t-table--loading-message">加载数据中，请稍后...</div>
                </template>
              </t-table>
              <div class="pa-25 pb-15">
                <t-pagination v-model="queryForm.pageNumber" v-model:page-size="queryForm.pageSize" :total="table.totalRow" :page-size-options="[5,10,15,20,50,100]"
                              @change="queryData"></t-pagination>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-sm3">
          <div class="layui-card">
            <div class="layui-card-body">
              <t-space>
                <t-tag v-for="(item,index) in userList" :key="item.id" theme="primary" size="large" closable @close="deselect(index)">{{item.name}}</t-tag>
              </t-space>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="bottom">
    <t-space class="button-container ">
      <t-button :loading="loading" theme="primary" @click="onSubmit"><i class="layui-icon layui-icon-ok mr-5 text-size-14"></i>确认选择</t-button>
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const PATH_URL = "sys/user/";
  const ORG_URL = "sys/org/";
</script>
<script>

  setupVue("#app", {
    setup() {

      // 查询表单
      const queryForm = Vue.reactive({ columnField: "id,name,account", status: 1, pageNumber: 1, pageSize: 10 });
      // 表格相关
      const table = useTable();
      const fetchData = window.reloadData = () => fetchPage(axiosGet, PATH_URL + "page", queryForm, table);
      const queryData = (info = {}) => {
        Vue.nextTick(() => {
          const { current = 1, pageSize } = info;
          queryForm.pageNumber = current;
          if (pageSize) queryForm.pageSize = pageSize;
          fetchData();
        })
      }
      init(() => {
        fetchData();
      })

      const userList = Vue.ref([])
      const LyData = getLayerData();
      const USER_LIST = LyData.userList;
      if (USER_LIST) {
        userList.value = USER_LIST;
      }
      const userIds = Vue.computed(() => userList.value.map(item => item.id));

      // 选择
      const choice = (row) => {
        const index = userIds.value.findIndex(item => item === row.id);
        if (index === -1) {
          userList.value.push({ id: row.id, name: row.name });
        } else {
          userList.value.splice(index, 1);
        }
      }
      // 取消选择
      const deselect = (index) => userList.value.splice(index, 1);
      // 确认选择
      const onSubmit = () => {
        if (LyData.success) {
          LyData.success(userList.value);
          closeLayer();
        } else {
          $baseAlert("未定义回调方法");
        }
      }

      // 表格列表显示
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '', width: "40px" },
        { colKey: 'account', title: '账户名', align: 'center', width: "100px" },
        { colKey: 'name', title: '人员名称', align: 'center', width: "100px" },
        {
          title: '操作',
          align: 'center', width: '60px',
          cell: (h, { row }) => {
            if (userIds.value.includes(row.id)) {
              return h(TDesign.Link, { theme: 'danger', onClick: () => choice(row) }, '取消');
            } else {
              return h(TDesign.Link, { theme: 'primary', onClick: () => choice(row) }, '选择');
            }
          },
        },
      ];

      // 组织选项
      const orgOptions = useOptions();
      getSuperior(ORG_URL + "treeOption", { columnField: "id,pid,name" }, orgOptions, true);
      // 组织过滤器
      const filterOrg = Vue.ref(null);
      const onInput = (value) => filterOrg.value = (node) => node.data.label.indexOf(value) >= 0;

      // 树点击
      const clickTree = (values) => {
        const value = values[0];
        if (value === '0') {
          queryForm.orgIdIn = '';
        } else {
          queryForm.orgIdIn = value;
        }
        queryData();
      }

      const closeBtn = useCloseBtn();
      return {
        closeBtn, queryForm, table, columns, queryData,
        orgOptions, clickTree, filterOrg, onInput,
        onSubmit,
        userList, userIds, deselect,
      }
    },
  });
</script>


</body>
</html>
